<template>
  <div class="hello">
    <Swiper :style="{'--swiper-navigation-color': '#fff','--swiper-pagination-color': '#fff'}"  :thumbs="{ swiper: thumbsSwiper }" class="mySwiper2">
      <swiper-slide v-for="(item,index) in listImg" :key="index"><img :src="item.img" /></swiper-slide>
    </Swiper>
    <!-- -->
    <Swiper @swiper="setThumbsSwiper" :spaceBetween="10" :slidesPerView="8" :watchSlidesVisibility="true" :watchSlidesProgress="true" :freeMode="true"  :navigation="true" class="mySwiper">
      <swiper-slide v-for="(item,index) in listImg" :key="index"><img :src="item.img" /></swiper-slide>
    </Swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.min.css';
import "swiper/components/navigation/navigation.min.css"
import "swiper/components/thumbs/thumbs.min.css"
import '../assets/css/style.css';
import SwiperCore, {Navigation,Thumbs} from 'swiper/core';

// install Swiper modules
SwiperCore.use([Navigation,Thumbs]);

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
        thumbsSwiper: null,
        listImg:[{
          img:require('../assets/image/nature-1.jpg')
        },{
          img:require('../assets/image/nature-2.jpg')
        },{
          img:require('../assets/image/nature-3.jpg')
        },{
          img:require('../assets/image/nature-4.jpg')
        },{
          img:require('../assets/image/nature-5.jpg')
        },{
          img:require('../assets/image/nature-6.jpg')
        },{
          img:require('../assets/image/nature-7.jpg')
        },{
          img:require('../assets/image/nature-8.jpg')
        },{
          img:require('../assets/image/nature-9.jpg')
        },{
          img:require('../assets/image/nature-10.jpg')
        }]
    };
  },
  methods: {
    setThumbsSwiper(swiper) {
      this.thumbsSwiper = swiper;
    },
  }
  
}
</script>


<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.hello{
  width:600px;
  height:300px;
}
</style>
